<template>
  <div>
    <h1 class="h">我是爷爷</h1>
    <h1 class="h1" @click="changeColor">我是{{ color }}</h1>
    <el-button type="primary" @click="changeColor">变色</el-button>
    <br />
    <!-- <router-link to="/child">下一页</router-link> -->
    <hr />
    <div>
      <el-button type="primary" @click="toAdd">下一页</el-button>
    </div>
    <Child :msg="name" />
    <el-button type="primary" @click="change">增加</el-button>
    <router-view></router-view>
  </div>
</template>

<script>
import { provide, ref } from "vue";
import Child from "./child.vue";
export default {
  components: {
    Child,
  },
  data() {
    return {
      color: "red",
      count: 1,
      name: "我的名字是康熙",
    };
  },
  created() {
    setInterval(() => {
      this.changeColor();
    }, 500);
  },
  setup() {
    let num = ref(123);
    provide("num", num);

    let change = () => {
      num.value++;
    };
    return { change };
  },
  methods: {
    changeColor() {
      const arr = ["red", "blue", "pink", "black", "hotpink", "purple", "lime", "skyblue"];

      this.color = arr[this.count];
      this.count++;
      // console.log(count)
      if (this.count === 8) {
        this.count = 0;
      }

      // this.color = "blue"
    },
    toAdd() {
      this.$router.push("/add");
    },
  },
};
</script>

<style scoped>
.h1 {
  color: v-bind(color);
}
</style>
